写一个新的H5网页，使用three.js这个库，画一个运动员在跑步，鼠标为终点线胜利线，鼠标移到哪里运动员就跑到哪里，最后运动员冲过终点线，获得胜利奖杯，并有彩带飘落
这是一个完整的单文件 HTML 示例。它使用 Three.js 创建了一个 3D 场景，包含一个由几何体组成的"火柴人"运动员、一条终点线、以及胜利后的奖杯和彩带效果。

实现的功能：

  1. 鼠标控制：运动员会一直朝向鼠标位置奔跑。
  2. 跑步动画：简单的骨骼动画（摆臂、迈腿）。
  3. 终点判定：当运动员碰到红色的终点线时，判定为胜利。
  4. 胜利特效：生成一个金色奖杯，并喷射五彩纸屑（彩带）。
你可以直接将以下代码保存为 .html 文件（例如 run.html），然后在浏览器中打开即可运行。
html
<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">

代码说明：

  1. 场景搭建：使用了 PlaneGeometry 创建绿色草地，添加了 GridHelper 作为跑道参考线。
  2. 运动员模型：没有使用外部复杂的模型文件，而是通过代码用 BoxGeometry 组合了一个简单的机器人/火柴人。
    • 包含 Group 作为关节（肩膀、胯部），这样在跑步时可以实现自然的摆动。
  3. 交互控制：
    • 使用 Raycaster 将鼠标的 2D 屏幕坐标转换为 3D 世界坐标。
    • 在 animate 循环中，计算运动员当前位置与鼠标位置的方向向量，并不断向该方向移动。
    • 使用 Math.atan2 计算旋转角度，使运动员始终面朝奔跑方向。
  4. 游戏逻辑：
    • 设置了一个 finishLineZ 变量作为终点线位置。
    • 当运动员的 Z 坐标小于终点线坐标时，触发 hasWon 状态。
  5. 胜利特效：
    • 奖杯：动态创建一个金色的圆柱体组合，并带有缩放弹出的动画。
    • 彩带：生成 100 个随机颜色的小平面（PlaneGeometry），赋予它们向上的初速度和重力模拟，形成喷射和飘落的效果。
H5游戏通常需要音效增强体验，需要我为你补充起跑口令和倒计时音效的代码吗？
你好，我是千问


向千问提问

内容由AI生成，可能不准确，请注意核实

html
代码
预览

千问 - 阿里旗下全能AI助手